<template>
  <div class="box">
    <h1>智能先锋页面</h1>

    <v-card :arr="arr"></v-card>
  </div>
</template>

<script>
let mock = [
  {
    id: 1,
    img:
      "https://img10.360buyimg.com/babel/s150x150_jfs/t1/75764/4/17099/77246/613b6716E7a0c00c0/b3e012e4d8fd1cee.jpg.webp",
    name: "大王卡",
    price: 20
  },
  {
    id: 2,
    img:
      "https://img12.360buyimg.com/babel/s150x150_jfs/t1/162830/33/8356/79978/603a8154E6e6149c7/645e23fd34d1138f.jpg.webp",
    name: "手机支架",
    price: 30
  },
  {
    id: 3,
    img:
      "https://img11.360buyimg.com/babel/s150x150_jfs/t1/176670/3/12846/155310/60b91094Ef17fbd4b/33e9ffcad9a2881a.jpg.webp",
    name: "散热器",
    price: 50
  }
];

import vCard from "./vCard.vue";
export default {
  components: {
    vCard
  },
  data() {
    return {
      arr: []
    };
  },
  mounted(){
    console.log("智能先锋开始请求数据");
    this.arr = mock;
  },

  //mounted里面的代码只走一遍，activated每次切回来都能执行
  //mounted放只希望他做一次的事情，activated放每次都需要重新做的事情
  //激活的钩子函数
  activated(){
    console.log("智能先锋有切回来了");
    window.onclick = function(){
      console.log("点击了页面");
    }
  },
  //失活
  deactivated(){
    console.log("智能先锋要被换掉了");
    window.onclick = null;
  },

  beforeDestroy(){
    console.log("智能先锋销毁");
    window.onclick = null;
  }
};
</script>

<style>
</style>